<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单控件</title>
</head>
<body>

<!-- 表单控件演示 -->
<!-- action属性为表单提交到的页面位置，留空则为当前页面 -->
<form action="" method="post">
    <h1>用户信息表单</h1>

    <!-- 单行文本输入 -->
    <label for="input-username">用户名</label>
    <input type="text" name="username" id="input-username" required>
    <br/>

    <!-- 密码文本输入 -->
    <label for="input-password">密码</label>
    <input type="password" name="password" id="input-password" required>
    <br/>

    <!-- 数字输入 -->
    <label for="input-age">年龄</label>
    <input type="number" name="age" id="input-age" placeholder="请输入年龄（选填）">
    <br/>

    <!-- 电话号码输入 -->
    <label for="input-phone">电话</label>
    <input type="tel" name="phone" id="input-phone" placeholder="请输入电话号码（选填）">
    <br/>

    <!-- 电子邮箱输入 -->
    <label for="input-email">邮箱</label>
    <input type="email" name="email" id="input-email" placeholder="请输入邮箱（选填）">
    <br/>

    <!-- 多行文本输入 -->
    <label for="input-introduce">自我介绍</label>
    <textarea name="introduce" id="input-introduce" placeholder="请输入自我介绍（选填）"></textarea>
    <br/>

    <!-- 下拉列表选择 -->
    <label for="input-education">学历</label>
    <select id="input-education">
        <option value="0">保密</option>
        <option value="1">中专</option>
        <option value="2">高中</option>
        <option value="3">大专</option>
        <option value="4">本科</option>
    </select>
    <br/>

    <!-- 单选框 -->
    <label for="input-sex">性别</label>
    <input type="radio" name="sex" id="input-sex-male">
    <label for="input-sex-male">男</label>

    <input type="radio" name="sex" id="input-sex-female">
    <label for="input-sex-female">女</label>
    <br/>

    <!-- 多选框 -->
    <label>特长</label>
    <input type="checkbox" name="soft" id="input-skill-soft">
    <label for="input-skill-soft">软件开发</label>

    <input type="checkbox" name="server" id="input-skill-server">
    <label for="input-skill-server">系统运维</label>

    <input type="checkbox" name="safe" id="input-skill-safe">
    <label for="input-skill-safe">网络安全</label>
    <br/>

    <button type="submit">保存</button>
    <button type="reset">重置</button>
</form>

</body>
</html>